<%
# Copyright (C) 2011 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<% content_for :page_title, t('titles.registered_services', 'Registered Services') %>
<% add_crumb(t('#crumbs.people', 'People'), context_url(@context, :context_users_url))
  @active_tab="people"
  add_crumb(t('#crumbs.registered_services', 'Registered Services'), context_url(@context, :context_user_services_url)) %>
<% content_for :right_side do %>
  <div class="rs-margin-bottom">
    <a class="btn button-sidebar-wide" href="<%= context_url(@context, :context_users_url) %>">{{> icons/arrow-left}} {{#t}}Back to Roster{{/t}}</a>
  </div>
  <h2>{{#t}}Service Types{{/t}}</h2>
  <div>
    <ul class="service_types">
    <% @services_hash.sort_by{|t, s| UserService.sort_position(t) }.each do |service_type, services| %>
      <li>
        <%= image_tag "#{service_type}_icon.png", :alt => "" %>
        <a href="#service_<%= service_type %>"><%= service_type.titleize %></a>
        <span class="service_count">(<%= services.length %>)</span>
      </li>
    <% end %>
    </ul>
  </div>
<% end %>
<% content_for :stylesheets do %>
<style>
.service_types {
  font-size: 1.2em;
  font-weight: bold;
}
.service_types li {
  line-height: 2.2em;
}
.service_types li img {
  vertical-align: middle;
}
.user_list {
  padding-left: 30px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.user_list li {
  font-size: 1.1em;
  line-height: 1.5em;
}
.service_count {
  font-size: 0.8em;
  color: #888;
}
.user_list .current_user {
  font-weight: bold;
}
.service_type {
  margin-bottom: 0;
}
.short_description {
  padding-left: 30px;
  font-size: 0.8em;
  max-width: 500px;
}
.service_type img {
  vertical-align: middle;
  padding-right: 5px;
}
</style>
<% end %>
<h1>{{#t}}Registered Services{{/t}}</h1>
<a href="<%= settings_profile_path %>" class="profile_url" style="display: none;">&nbsp;</a>
<p>
  <%= t 'help.user_services', %{If other members choose, they can let you see which outside services they've linked to their Canvas account.  This can make it easier to coordinate group projects and also link up outside of class.} %>
</p>
<% if @current_user && @current_user.user_services.empty? %>
  <p>
    <%= t 'help.no_services', %{You haven't linked your user profile to any external services.  You can link your Canvas account to services like Twitter.} %>
  </p>
  <p>
    <a href="<%= settings_profile_path %>#registered_web_services" class="btn btn-primary">{{> icons/link}} {{#t}}Link web services to my account{{/t}}</a>
  </p>
<% elsif @current_user && !@current_user.show_user_services %>
  <p>
    <%= t 'help.services_private', %{You haven't enabled your list of registered services.  Enabling this list will let fellow course and group members see which services you have linked to your Canvas account.} %>
  </p>
  <p>
    <input type="checkbox" id="show_user_services" class="show_user_services_checkbox"/><label for="show_user_services">{{#t}}Let fellow course/group members see which services I've linked to my profile{{/t}}</label>
  </p>
<% end %>

<% @services_hash.sort_by{|t, s| UserService.sort_position(t) }.each do |service_type, services| %>
<% service_example = services.first %>
<a name="service_<%= service_type %>"></a>
<h2 class="service_type"><%= image_tag "#{service_type}_icon.png", :alt => "" %><%= service_type.titleize %></h2>
<div class="short_description"><%= UserService.short_description(service_type) %></div>
<ul class="user_list">
<% services.uniq(&:user_id).each do |service| %>
  <li class="<%= 'current_user' if @current_user && service.user_id == @current_user.id %>">
    <% if service.has_profile_link? %>
      <a href="<%= service.service_user_link %>">
        <%= @users_hash[service.user_id].name %>
      </a>
    <% else %>
      <%= @users_hash[service.user_id].name %>
    <% end %>
  </li>
<% end %>
<% if !@current_user_services[service_type] %>
  <li class="current_user">
    <% if UserService.registration_url(service_type) %>
      <a href="<%= UserService.registration_url(service_type) %>">{{#t}}Sign Up{{/t}}</a>
      |
    <% end %>
    <a href="<%= settings_profile_path %>#register_<%= service_type %>">{{#t}}Link Existing Account{{/t}}</a>
  </li>
<% end %>
</ul>
<% end %>

<script async src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>

<% js_bundle 'legacy/context_roster_user_services' %>
